<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>小米官网</title>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/page.css"/>
</head>
<body>
<div class="top row">
    <div class="top_a center row">
        <ul class="fl">
            <li><a href="#">小米网</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">MIUI</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">米聊</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">游戏</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">多看阅读</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">云服务</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">小米网移动版</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">Select region</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">米粉节答疑</a></li>
        </ul>
        <ul class="fr">
            <li><a href="#">登录</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>
</div>
<div class="dk center">
    <div class="top_b">
        <div class="top_b_an fr">
            <p><span></span>4月14日开放购买</p>
            <button>购物车</button>
        </div>
        <div class="top_c fr rp">
            <input class="ap" placeholder="搜索您需要的商品" type="text"/>
            <span class="ap"></span>
        </div>
    </div>
    <div class="nav wid">
        <div class="nav-a">
            <div class="nav-a-a fl">
                全部商品分类
            </div>
            <div class="nav-a-b fr">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">小米手机</a></li>
                    <li><a href="#">红米</a></li>
                    <li><a href="#">小米平板</a></li>
                    <li><a href="#">小米电视</a></li>
                    <li><a href="#">盒子</a></li>
                    <li><a href="#">路由器</a></li>
                    <li><a href="#">合约机</a></li>
                    <li><a href="#">服务</a></li>
                    <li><a href="#">社区</a></li>
                </ul>
            </div>
        </div>
        <div class="nav-d wid">
            <div class="nav-b fl wid">
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
                <div class="nav-b-a">
                    <p>购买手机</p>
                    <ul>
                        <li><a href="#">小米Noto</a></li>
                        <li><a href="#">小米4</a></li>
                        <li><a href="#">红米</a></li>
                        <li><a href="#">红米Noto</a></li>
                    </ul>
                </div>
            </div>
            <div class="nav-c fr
           ">
                <div class="nav-c-a">
                </div>
                <div class="nav-e">
                    <div class="nav-e-a fl"></div>
                    <div class="nav-e-b fl"></div>
                    <div class="nav-e-c fl"></div>
                </div>
            </div>

        </div>

    </div>
    <p class="dan"><span>小米明星单品</span> 根据机型选配件</p>

    <div class="dan-a row">
        <div class="dan-a-a falseLine rp fl">
            <img src="images/T1PxJvBCAT1RXrhCrK!220x220.jpg" alt=""/>

            <p>小米智能插座</p>
            <span>让变通家电变得智能</span>
        </div>

        <div class="dan-a-a falseLine rp fl">
            <img src="images/T1XYxTBsAT1RXrhCrK!220x220.jpg" alt=""/>

            <p>小米空气净化器</p>
            <span>高性能智能空气净化器立即预约</span>
        </div>

        <div class="dan-a-a falseLine rp fl">
            <img src="images/T1y0JTBy_T1RXrhCrK!220x220.jpg" alt=""/>

            <p>小米活塞耳机简装版</p>
            <span>好声音源自活塞式音腔，延续经典设计</span>
        </div>

        <div class="dan-a-a falseLine rp fl">
            <img src="images/T1kiWTBChT1RXrhCrK!220x220.jpg" alt=""/>

            <p>小米路由器</p>
            <span>顶级双屏幕AC智能路由器，内置1TB大硬盘</span>
        </div>
    </div>

    <div class="new row">
        <p class="fl">新品上架</p>
        <span class="fr">更多&gt</span>
    </div>
    <div class="new-a wid">
        <div class="new-b fr">
            <a href="#">
                <div class="new-b-a">
                    <img class="fr" src="images/T1ByZTBjJT1RXrhCrK.jpg" alt=""/>

                    <div>特价商品</div>
                    <p>SanDisk32GB存...</p>

                    <p>79元<span>109元</span></p>

                    <p>还有更多特价商品</p>
                </div>
            </a>
            <a href="#">
                <div class="new-b-b">
                    <img class="fr" src="images/channel-list-cool.jpg" alt=""/>

                    <p>特惠配件套装</p>

                    <p>手机必备配件组合购买</p>

                    <p>实惠更优惠</p>
                </div>
            </a>
            <a href="#">
                <div class="new-b-b">
                    <img class="fr" src="images/channel-list-new.jpg" alt=""/>

                    <p>我爱酷玩</p>

                    <p>邂逅炫酷的电子产品</p>

                    <p>结交趣味相投的朋友</p>
                </div>
            </a>

            <div class="new-c">
                <div class="new-c-a">
                    <ul>
                        <li><a href="#">企业用户采购通道 <span>&gt</span></a></li>
                        <li><a href="#">小米手机防伪查询<span>&gt</span></a></li>
                        <li><a href="#">小米手机官翻版<span>&gt</span></a></li>
                        <li><a href="#">小米路由器官翻版<span>&gt</span></a></li>
                        <li><a href="#">米粉节红包<span>&gt</span></a></li>
                    </ul>
                </div>
                <div class="new-c-b">
                    <p>话费充值</p>
                    <input type="text"/>
                    <input type="text"/>

                    <p>实付价格：<span>98.4</span>元起</p>
                    <button>立即充值</button>

                </div>
            </div>
        </div>
        <div class="new-d fl">
            <a href="#">
                <div class="new-d-a fr">
                    <p>小米手环<br>79元</p>
                    <img src="images/T1qaVvB7CT1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-b fl">
                </div>
            </a>
            <a href="#">
                <div class="new-d-c fr">
                    <p>小米4实木后盖<br>69元</p>
                    <img src="images/T12qZvB7CT1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-d fr">
                    <p>小米T恤路标MILogo<br>39元</p>
                    <img src="images/T1crEgBCYT1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-e fl">
                    <span>5周年米兔钥匙扣<br>9.9元</span>
                    <img class="fr" src="images/yaoshi.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-e fl">
                    <span>QCY派Q8蓝牙耳机<br>59.9元</span>
                    <img class="fr" src="images/lanyaerji.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-d fr">
                    <p>先锋CL31系列入耳式耳机<br>99元</p>
                    <img src="images/T1GXxvBsET1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-d fr">
                    <p>小米自拍杆<br>49元</p>
                    <img src="images/T1DrL_B4CT1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="new-d-d fl">
                    <p>小米Note超薄保护壳<br>9元</p>
                    <img src="images/T1VkKvBvhT1RXrhCrK!220x220.jpg" alt=""/>
                </div>
            </a>
        </div>
    </div>
    <p class="dajia">大家都喜欢</p>

    <div class="dajia-a wid">
        <div class="dajia-b fr">
            <div class="dajia-b-a">
                <p><span>HOT</span>热销商品排行</p>
            </div>
            <a href="#">
                <div class="dajia-b-b">
                    <span>1</span>

                    <p>小钢炮蓝牙音箱<br>169元</p>
                    <img class="fr" src="images/yingxiang-.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="dajia-b-b">
                    <span>2</span>

                    <p>小米LED随身灯<br>19.9元</p>
                    <img class="fr" src="images/mideng.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="dajia-b-b">
                    <span>3</span>

                    <p>小蜜蜂手机支架<br>19元</p>
                    <img class="fr" src="images/mifeng-.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="dajia-b-b">
                    <span>4</span>

                    <p>米键<br>4.9元</p>
                    <img class="fr" src="images/mijian.png" alt=""/>
                </div>
            </a>
            <a href="#">
                <div class="dajia-b-b">
                    <span>5</span>

                    <p>二合一镜头<br>59元</p>
                    <img class="fr" src="images/pang.png" alt=""/>
                </div>
            </a>
        </div>
        <a href="#">
            <div class="new-d-d fr">
                <p>小米移动电源5000mAh<br>49元</p>
                <img src="images/T1pOWvBKET1RXrhCrK!220x220.jpg" alt=""/>
            </div>
        </a>

        <div class="new-d-b fl">
        </div>
        <a href="#">
            <div class="new-d-d fr">
                <p>红米Note卡通主题背贴<br>39元</p>
                <img src="images/T1.qV_B4AT1RXrhCrK!220x220.jpg" alt=""/>
            </div>
        </a>
        <a href="#">
            <div class="new-d-d fr">
                <p>先锋SE-MJ512折叠头戴耳机<br>168元</p>
                <img src="images/T14yxTBsKT1RXrhCrK!220x220.jpg" alt=""/>
            </div>
        </a>
        <a href="#">
            <div class="new-d-d fl">
                <p>小米随身WIFI 8GB U盘版蓝色<br>49.9元</p>
                <img src="images/T1Zzd_ByCv1RXrhCrK!220x220.jpg" alt=""/>
            </div>
        </a>
    </div>
    <p class="hot">热评产品</p>

    <div class="hot-a">
        <a href="#">
            <div class=" hot-b rp falseLine fl">
                <p>小米随身杯子</p>
                <img src="images/xingxing.png" alt=""/>

                <p>5847人好评</p>
                <img src="images/T1_adTBvKT1RXrhCrK!220x220.jpg" alt=""/>

                <p>环保材质，密封防漏，携带方便，点个赞</p>
            </div>
        </a>
        <a href="#">
            <div class=" hot-b rp falseLine fl">
                <p>小米商务真皮钱包</p>
                <img src="images/xingxing.png" alt=""/>

                <p>4847人好评</p>
                <img src="images/T1nmhTBTKT1RXrhCrK!220x220.jpg" alt=""/>

                <p>款式好看，美观大方，是真皮的无误</p>
            </div>
        </a>
        <a href="#">
            <div class=" hot-b rp falseLine fl">
                <p>小米4唯美蕾丝3D保护壳</p>
                <img src="images/xingxing.png" alt=""/>

                <p>6847人好评</p>
                <img src="images/T1VkKvBvhT1RXrhCrK!220x220.jpg" alt=""/>

                <p>实物比图片更美好系列产品，哈哈哈哈，支持小米!</p>
            </div>
        </a>
        <a href="#">
            <div class=" hot-b rp falseLine fl">
                <p>小米简约帆布腰包</p>
                <img src="images/xingxing.png" alt=""/>

                <p>3847人好评</p>
                <img src="images/T14cLgBXKT1RXrhCrK!220x220.jpg" alt=""/>

                <p>斜挎也行围腰上也行，反正就是喜欢！</p>
            </div>
        </a>
    </div>
    <p class="tejia-s">特价产品</p>

    <div class="tejia wid">
        <div class="tejia-a falseLine fl rp">
            <div class="tejia-a-a fr">
                省38元
            </div>
            <p>红米必备套装</p>

            <p>79元 <span>117元</span></p>
            <img src="images/T1F9ZTBbxT1RXrhCrK!220x220.jpg" alt=""/>
        </div>
        <div class="tejia-a falseLine fl rp">
            <div class="tejia-a-a fr">
                省15.1元
            </div>
            <p>fotopro手机相机支架套装</p>

            <p>48.9元 <span>64元</span></p>
            <img src="images/T1GtZvBvVT1RXrhCrK!220x220.jpg" alt=""/>
        </div>
        <div class="tejia-a falseLine fl rp">
            <div class="tejia-a-a fr">
                省49元
            </div>
            <p>大电池全能套装</p>

            <p>129元 <span>178元</span></p>
            <img src="images/T1icAvBTdT1RXrhCrK!220x220.jpg" alt=""/>
        </div>
        <div class="tejia-a falseLine fl rp">
            <div class="tejia-a-a fr">
                省20元
            </div>
            <p>小米快充套装</p>

            <p>59元 <span>79元</span></p>
            <img src="images/T1ipAvB_ZT1RXrhCrK!220x220.jpg" alt=""/>
        </div>
    </div>
    <p class="book">多看图书</p>

    <div class="book-a wid falseLine fl rp">
        <div class="book-b fl">
            <p class="book-b-b">《互联网+：小米案例版》<br>刘润<br>9.99元</p>
            <img src="images/hlws.jpg" alt=""/>
            <p class="book-b-a">多看独家首发！第一本讲述“互联网+”的书，小<br>米口述成功之道</p>
        </div>


    <div class="book-b fl">
        <p class=book-b-b"">《财经（2015年第9期）》<br>《财经》编辑部<br>3.99元</p>
        <img src="images/cj9s.jpg" alt=""/>
        <p class="book-b-a">全方位解密小米：战略，管理，供应链</p>
    </div>

    <div class="book-b fl">
        <p class="book-b-b">《雪球专刊年市必备手册》<br>雪球用户<br>免费</p>
        <img src="images/nsbbs.jpg" alt=""/>
        <p class="book-b-a">全面带你看清后市；一个经历5轮牛熊市的股市老<br>兵：3600点之后何去何从</p>
    </div>

    <div class="book-b fl">
        <p class="book-b-b">《易中天中华史：三国纪》<br>易中天<br>7.99元</p>
        <img src="images/sgjs.jpg" alt=""/>
        <p class="book-b-a">《三国演义》背后的历史真相是什么？易中天不扣<br>帽子，不斗忠奸，只讲真实！</p>
    </div>
</div>
</div>
</body>
</html>